<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>城市防涝检测系统</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
    <link rel="stylesheet" href="../static/css/aos.css">
    <link rel="stylesheet" href="../static/css/ekko-lightbox.css">
    <link rel="stylesheet" href="../static/styles/bootstrap.css">
    <link rel="stylesheet" href="../static/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="../static/styles/main.css">
    <!-- 百度地图密匙 -->
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=CsItNKwRaLZ8GXXaeyQI6kRozCMrtKcF"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body id="top">
<header>
    <div class="container pt-4">
        <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary px-0" style="background-color: aqua">
            <a class="text-white navbar-brand col-md-4 offset-md-1" href="#"><img style="height: 75px;" src="/static/images/logo.jpg" alt=""></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#da-navbarNav"
                    aria-controls="da-navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span
                    class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse text-uppercase col-md-6" style="margin: 0 10px 0 0" id="da-navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item"><a class="nav-link smooth-scroll" href="#map">地图</a></li>
                    <li class="nav-item"><a class="nav-link smooth-scroll" href="#message">预警查询</a></li>
                    <li class="nav-item"><a class="nav-link smooth-scroll" href="#image">图片查询</a></li>
                    <li class="nav-item"><a class="nav-link smooth-scroll" href="#manager">后台管理</a></li>
                    <li class="nav-item"><a class="nav-link smooth-scroll" href="#uploadImage">预警上传</a></li>
                    <li class="nav-item"><a class="nav-link smooth-scroll" href="#learn">关于我们</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="da-home-page-text" data-aos="fade-right" data-aos-duration="1000">
        <div class="container" id="home">
            <div class="col-md-10 col-sm-12 px-0 mx-0">
                <h2 class="display-3" style="margin-left:-6px;">城市防涝检测系统</h2>
                <h3 class="h5 mt-3">科技让生活更加智能</h3><a class="smooth-scroll btn btn-outline-light mt-4"
                                                     href="#learn">了解更多</a>
            </div>
        </div>
    </div>
</header>
<div class="page-content">
    <div>
        <div class="da-section bg-light" id="map">
            <div class="h3 pb-5 text-center" data-aos="fade-up">地图</div>
            <div class="row">
                <div class="container-fluid"><!--百度地图容器-->
                    <div class="" style="width:1900px;height:750px;border:#ccc solid 1px;" id="allmap"></div>
                </div>
            </div>
        </div>
        <div id="message">
            <div class="h3 pb-5 text-center col-md-12" data-aos="fade-up">预警查询</div>
            <div class="col-md-12">
                <table id="messageTable" style="table-layout: fixed;word-break: break-all;text-align: center;vertical-align: middle!important;">
                </table>
            </div>
        </div>
        <div id="image">
            <div class="h3 pb-5 text-center col-md-12" data-aos="fade-up">图片查询</div>
            <div class="col-md-12">
                <table id="imageTable" style="table-layout: fixed;word-break: break-all;">
                </table>
            </div>
        </div>
        <div id="manager">
            <div class="row mx-0">
                <div class="h3 pb-5 text-center col-md-12" data-aos="fade-up">后台管理</div>
            </div>
            <div class="row mx-0" style="background-color: cadetblue;">
                <div class="col-md-12">
                    <div class="container-fluid">
                        <div class="col-md-2 offset-md-5">
                            <h2 class="text-center" style="color: white;margin: 100px 10px 10px 10px;">请先登录！</h2>
                            <form action="http://localhost:7051/login" method="post">
                                <div class="input-group" style="margin: 10px;"><input type="text" id="managerName"
                                                                                      class="form-control"
                                                                                      placeholder="用户名"
                                                                                      name="managerName"></div>
                                <div class="input-group" style="margin: 10px;"><input type="password"
                                                                                      class="form-control"
                                                                                      placeholder="密码"
                                                                                      name="password"></div>
                                <div class="text-center">
                                    <button class="btn btn-info" style="margin: 10px 10px 10px 10px;" type="submit">
                                        登录
                                    </button>
                                </div>
                                <a href="http://localhost:6001/toMessage" style="margin: 10px 10px 100px 110px;color: white;">已登录？</a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="da-expertise" id="uploadImage">
        <div class="row mx-0">
            <div class="h3 pb-5 text-center col-md-12" style="margin: 100px 10px 10px 10px;">预警上传</div>
        </div>
        <div class="row mx-0">
            <div class="col-md-6 offset-md-4">
                <form class="form-horizontal" action="http://localhost:7041/uploadImage" method="post"
                      enctype="multipart/form-data">
                    <div class="form-group">
                        <div class="col-sm-8">
                            <input type="text" class="form-control" placeholder="地址描述(输入具体街道即可)"
                                   id="imageName" name="imageName">
                        </div>
                        <p id="checkImageName"></p>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-8">
                            <input type="file" id="file" class="form-control" name="file">
                        </div>
                    </div>
                    <div class="offset-md-1">
                        <select name="province" id="province" onclick="getCity()">
                            <option value="">----请选择省----</option>
                        </select>
                        <select name="city" id="city" onclick="getDistrict()">
                            <option value="">-----请选择城市-----</option>
                        </select>
                        <select name="district" id="district">
                            <option value="">-----请选择区/县-----</option>
                        </select>
                    </div>
                    <div style="margin: 20px 10px 80px 275px;">
                        <button class="btn btn-primary">上传</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="da-section da-work bg-secondary" id="learn">
            <div class="container">
                <div class="h3 pb-3 text-center text-white" data-aos="fade-up">网站技术</div>
                <p class="px-5 pb-5 text-center text-white" data-aos="fade-up">网站基于springcloud+nacos注+mybatis搭建后台，mysql+redis做数据处理，
                    gateway+shiro实现网关与权限管理，fastdfs为分布式文件存储模块
                    前端由bootstrap+thymeleaf搭建，图片智能识别通过TensorFlow训练模型，整合flask框架提供识别api</p>
                <div class="row">
                    <div class="col-md-4">
                        <div class="card mb-3" data-aos="flip-left">
                            <div class="card-body mt-4 mb-1 text-center"><i
                                    class="pb-3 text-primary fas fa-briefcase fa-3x"></i>
                                <div class="h4 pb-3">SpringCloud</div>
                                <p>SpringCloud是一系列框架的集合。它利用SpringBoot的开发便利性简化了分布式系统开发。
                                    Spring是将目前各家公司开发的比较成熟的服务框架组合起来，
                                    通过SpringBoot风格进行再封装屏蔽掉了复杂的配置，最终给开发者留出了一套易部署的分布式系统开发工具包。
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-3" data-aos="zoom-in-up">
                            <div class="card-body mt-4 mb-1 text-center"><i
                                    class="pb-3 text-primary fas fa-sliders-h fa-3x"></i>
                                <div class="h4 pb-3">TensorFlow</div>
                                <p>TensorFlow™ 是一个使用数据流图进行数值计算的开放源代码软件库。图中的节点代表数学运算，
                                    而图中的边则代表在这些节点之间传递的多维数组（张量）。
                                    借助这种灵活的架构，您可以通过一个 API 将计算工作部署到桌面设备、
                                    服务器或移动设备中的一个或多个 CPU 或 GPU</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-3" data-aos="flip-right">
                            <div class="card-body mt-4 mb-1 text-center"><i
                                    class="pb-3 text-primary fas fa-trophy fa-3x"></i>
                                <div class="h4 pb-3">bootstrap</div>
                                <p>简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。
                                    基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。
                                    自定义JQuery插件，完整的类库，基于Less等</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<footer class="panel-footer" style="width: 100%; overflow: hidden;">
    <div class="container">
        <div class="row footer-top" style="text-align: center;">
            <h1 class="col-md-4 offset-md-4">城市防涝检测系统</h1>
        </div>
        <hr style="border: 1px  solid #000000;">
        <div class="row" style="text-align: center;">
            <div class="col-md-6">
                <label>智能生活，一切为你！</label>
                <label>I can do everything for you!</label>
            </div>
            <div class="col-md-6">
                <ul>
                    <li>技术链接</li>
                    <li><a href="https://tensorflow.google.cn" style="color: gray;">tensorflow</a></li>
                    <li><a href="https://spring.io/projects/spring-boot" style=" color: gray;">spring-boot</a></li>
                    <li><a href="http://www.mybatis.cn/" style=" color: gray;">mybatis</a></li>
                    <li><a href="https://nacos.io/zh-cn/docs/quick-start.html" style=" color: gray;">nacos</a></li>
                </ul>
            </div>
        </div>
        <div class="da-section bg-secondary text-white">
            <div class="container">
                <div class="row px-4">
                    <div class="col-md-3 col-sm-6">
                        <div class="media py-2" data-aos="flip-up"><i
                                class="mr-3 fas fa-clipboard-check  fa-3x fa-fw"></i>
                            <div class="media-body">
                                <div class="h5">1575</div>
                                <div class="h6">提交图片</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="media py-2" data-aos="flip-up"><i
                                class="mr-3 fas fa-smile  fa-3x fa-fw"></i>
                            <div class="media-body">
                                <div class="h5">1245</div>
                                <div class="h6">使用人数</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="media py-2" data-aos="flip-up"><i
                                class="mr-3 fas fa-file-alt fa-3x fa-fw"></i>
                            <div class="media-body">
                                <div class="h5">865</div>
                                <div class="h6">预警次数</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="media py-2" data-aos="flip-up"><i
                                class="mr-3 fas fa-clock  fa-3x fa-fw"></i>
                            <div class="media-body">
                                <div class="h5">856h</div>
                                <div class="h6">使用时间</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
<div id="scrolltop">
    <button class="btn btn-primary"><span class="icon"><i class="fas fa-angle-up fa-2x"></i></span></button>
</div>
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/popper.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/aos.js"></script>
<script src="../static/js/scripts.js"></script>
<script src="../static/js/ekko-lightbox.min.js"></script>
<script src="../static/scripts/main.js"></script>
<script src="../static/js/bootstrap-table.min.js"></script>
<script src="../static/js/jquery.bootstrap-autohidingnavbar.min.js"></script>
<script>
    $("nav.navbar.navbar-expand-lg.fixed-top").autoHidingNavbar();
</script>
</body>
<script type="text/javascript">

    // 图片
    $(function () {
        $('#imageTable').bootstrapTable({
            ajax: function (request) {
                $.ajax({
                    type: "GET",
                    url: "http://localhost:7041/getAllImage",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    data: '',
                    success: function (msg) {
                        request.success({
                            row: msg
                        });
                        $('#imageTable').bootstrapTable('load', msg);
                    },
                    error: function () {
                        alert("错误");
                    }
                });
            },

            toolbar: '#toolbar',
            sortName: "imageTime",
            sortOrder: "desc",
            pageSize: 15,
            pageNumber: 1,
            pageList: "[10, 25, 50, 100, All]",
            search: true,
            pagination: true,
            columns: [{
                field: 'imageUrl',
                title: '图片',
                align: 'center',
                formatter: imageFormatter,
                switchable: true,
                width: 200
            }, {
                field: 'imageName',
                title: '图片名称',
                align: 'center',
                searchable: 'true',
                switchable: true,
                width: 150,
            }, {
                field: 'imageDescription',
                title: '图片描述',
                align: 'center',
                switchable: true,
                width: 150
            }, {
                field: 'status',
                title: '识别状态',
                sortable: true,
                align: 'center',
                formatter: statusFormatter,
                switchable: true,
                width: 150
            }, {
                field: 'province',
                title: '省份',
                align: 'center',
                formatter: provinceFormatter,
                switchable: true,
                width: 150
            }, {
                field: 'city',
                title: '城市',
                align: 'center',
                formatter: cityFormatter,
                switchable: true,
                width: 150
            }, {
                field: 'district',
                title: '区/县',
                align: 'center',
                formatter: districtFormatter,
                switchable: true,
                width: 150
            }, {
                field: 'result',
                title: '图片状态',
                sortable: true,
                align: 'center',
                formatter: resultFormatter,
                switchable: true,
                width: 150
            }, {
                field: 'coordinate',
                title: '坐标信息',
                align: 'center',
                formatter: coordinateFormatter,
                switchable: true,
                width: 150
            }, {
                field: 'imageTime',
                title: '上传时间',
                align: 'center',
                sortable: true,
                switchable: true,
                width: 150
            },],
        });
    });

    function coordinateFormatter(value, row, index) {
        return value.latitude + "," + value.longitude;
    }

    function resultFormatter(value, row, index) {
        return value.resultName;
    }

    function districtFormatter(value, row, index) {
        return value.district;
    }

    function cityFormatter(value, row, index) {
        return value.city;
    }

    function provinceFormatter(value, row, index) {
        return value.province;
    }

    function statusFormatter(value) {
        switch (value) {
            case "1":
                return "未识别";
            case "2":
                return "已识别";
        }
    }

    // 图片字段格式化
    function imageFormatter(value) {
        return '<img style="width: 125px;height: 125px" src="' + value + '">'
    }
</script>
<script type="text/javascript">
    // 消息
    $(function () {
        $('#messageTable').bootstrapTable({
            ajax: function (request) {
                $.ajax({
                    type: "GET",
                    url: "http://localhost:7061/getAllMessage",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    data: '',
                    success: function (msg) {
                        request.success({
                            row: msg
                        });
                        $('#messageTable').bootstrapTable('load', msg);
                    },
                    error: function () {
                        alert("错误");
                    }
                });
            },

            toolbar: '#toolbar',
            singleSelect: true,
            sortName: "createTime",
            sortOrder: "desc",
            pageSize: 15,
            pageList: "[10, 25, 50, 100, All]",
            pageNumber: 1,
            search: true,
            pagination: true,
            columns: [{
                field: 'imageUrl',
                title: '图片',
                align: 'center',
                formatter: imageFormatter,
                switchable: true,
                width: 200
            }, {
                field: 'coordinate',
                title: '坐标信息',
                align: 'center',
                formatter: coordinateFormatter,
                switchable: true,
                width: 200
            }, {
                field: 'province',
                title: '省份',
                align: 'center',
                formatter: provinceFormatter,
                switchable: true,
                width: 200
            }, {
                field: 'city',
                title: '城市',
                align: 'center',
                formatter: cityFormatter,
                switchable: true,
                width: 200
            }, {
                field: 'district',
                title: '区/县',
                align: 'center',
                formatter: districtFormatter,
                switchable: true,
                width: 200
            }, {
                field: 'createTime',
                title: '上传时间',
                align: 'center',
                switchable: true,
                sortable: true,
                width: 200
            }, {
                field: 'result',
                title: '消息状态',
                align: 'center',
                switchable: true,
                sortable: true,
                width: 200
            },],
        });
    });

    // 图片字段格式化
    function imageFormatter(value) {
        return '<img style="width: 125px;height: 125px" src="' + value + '">'
    }

    function districtFormatter(value, row, index) {
        return value.district;
    }

    function cityFormatter(value, row, index) {
        return value.city;
    }

    function provinceFormatter(value, row, index) {
        return value.province;
    }

    function coordinateFormatter(value, row, index) {
        return value.latitude + "," + value.longitude;
    }
</script>
<script type="text/javascript">

    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(117.97, 28.45);
    map.centerAndZoom(point, 12);

    // 根据ip定位地图
    // var geolocation = new BMap.Geolocation();
    // geolocation.getCurrentPosition(function (r) {
    //     if (this.getStatus() == BMAP_STATUS_SUCCESS) {
    //         var mk = new BMap.Marker(r.point);
    //         // map.addOverlay(mk);
    //         map.panTo(r.point);
    //         document.getElementById('location').innerHTML += r.point.lng + "," + r.point.lat;
    //         // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
    //     } else {
    //         alert('failed' + this.getStatus());
    //     }
    // }, {enableHighAccuracy: true});
    //关于状态码
    //BMAP_STATUS_SUCCESS	检索成功。对应数值“0”。
    //BMAP_STATUS_CITY_LIST	城市列表。对应数值“1”。
    //BMAP_STATUS_UNKNOWN_LOCATION	位置结果未知。对应数值“2”。
    //BMAP_STATUS_UNKNOWN_ROUTE	导航结果未知。对应数值“3”。
    //BMAP_STATUS_INVALID_KEY	非法密钥。对应数值“4”。
    //BMAP_STATUS_INVALID_REQUEST	非法请求。对应数值“5”。
    //BMAP_STATUS_PERMISSION_DENIED	没有权限。对应数值“6”。(自 1.1 新增)
    //BMAP_STATUS_SERVICE_UNAVAILABLE	服务不可用。对应数值“7”。(自 1.1 新增)
    //BMAP_STATUS_TIMEOUT	超时。对应数值“8”。(自 1.1 新增)


    var top_right_navigation = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_RIGHT
    }); //右上角，仅包含平移和缩放按钮
    /*缩放控件type有四种类型:
    BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/

    //添加控件和比例尺
    map.addControl(top_right_navigation);

    // 城市控件
    var size = new BMap.Size(10, 20);
    map.addControl(new BMap.CityListControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        offset: size,
        // 切换城市之前事件
        // onChangeBefore: function(){
        //    alert('before');
        // },
        // 切换城市之后事件
        // onChangeAfter:function(){
        //   alert('after');
        // }
    }));


    // 用经纬度设置地图中心点
    function theCoordinateLocation() {
        if (document.getElementById("longitude").value != "" && document.getElementById("latitude").value != "") {
            map.clearOverlays();
            var new_point = new BMap.Point(document.getElementById("longitude").value, document.getElementById("latitude").value);
            var marker = new BMap.Marker(new_point);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            map.panTo(new_point);
        }
    }

    function theCityLocation() {
        var city = document.getElementById("cityName").value;
        if (city != "") {
            map.centerAndZoom(city, 11);      // 用城市名设置地图中心点
        }
    }

    var opts = {
        width: 200,     // 信息窗口宽度
        height: 200,     // 信息窗口高度
        title: "预警信息", // 信息窗口标题
        enableMessage: true//设置允许信息窗发送短息
    };

    var data_info = [];

    function addClickHandler(content, marker) {
        marker.addEventListener("click", function (e) {
                openInfo(content, e)
            }
        );
    }

    function openInfo(content, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    }

    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "http://localhost:7061/getDangerMessage",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            data: '',
            success: function (data) {
                data_info = data;
                for (var i = 0; i < data_info.length; i++) {
                    var marker = new BMap.Marker(new BMap.Point(data_info[i].coordinate.latitude, data_info[i].coordinate.longitude));  // 创建标注
                    var content = "";
                    content += "预警时间:" + data_info[i].createTime.toString() + "<br>";
                    content += "道路状态:" + data_info[i].result.toString() + "<br>";
                    content += "图片:<img style='float:right;margin:4px' id='imgDemo' src='" + data_info[i].imageUrl.toString() +
                        "' width='139' height='104'/><br>";
                    map.addOverlay(marker);               // 将标注添加到地图中
                    addClickHandler(content, marker);
                }
            },
            error: function () {
                alert("错误");
            }
        });
    });


    function getAllProvince() {
        $.ajax({
            url: "http://localhost:7081/getAllProvince",
            type: "GET",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                if (data != null) {
                    $(data).each(function (i) {
                        $("#province").append(
                            '<option value="' + data[i].provinceId + '">' + data[i].province + '</option>'
                        );
                    });
                }
            },
            error: function () {
                alert("省份请求错误！");
            }
        });

    }

    window.onload = getAllProvince;

    //所在区域联动列
    function getCity() {
        $("#city").html('<option value="">----请选择城市----</option>');
        $.ajax({
            url: "http://localhost:7081/getAllCityByProvince?provinceId=" + $("#province").val(),
            type: "GET",
            dataType: "json",
            success: function (data) {
                if (data != null) {
                    $(data).each(function (i) {
                        $("#city").append(
                            '<option value="' + data[i].cityId + '">' + data[i].city + '</option>'
                        );
                    });
                }
            },
            error: function () {
                alert("请先选择省份！");
            }
        });
    }

    //市级菜单选择事件
    function getDistrict() {
        $("#district").html('<option value="">----请选择区域----</option>');
        $.ajax({
            url: "http://localhost:7011/getAllDistrictByCity?cityId=" + $("#city").val(),
            type: "GET",
            dataType: "json",
            success: function (data) {
                if (data != null) {
                    $(data).each(function (i) {
                        $("#district").append(
                            '<option value="' + data[i].districtId + '">' + data[i].district + '</option>'
                        );
                    });
                }
            },
            error: function () {
                alert("请先选择城市！");
            }
        });
    }
</script>
</html>
